<<template>
  <div>
    <h3 class="title">岗位详情</h3>
    <el-divider />
    <el-form :model="detailData">
      <el-form-item label="岗位名称">
        <el-input required v-model="detailData.job_name" placeholder="前端工程师" />
      </el-form-item>

      <el-form-item label="岗位薪资">
        <el-input required v-model="detailData.job_salary" placeholder="8-10K" />
      </el-form-item>

      <el-form-item label="岗位标签">
        <el-input required v-model="detailData.job_label" placeholder="HTML,JavaScript,Java" />
      </el-form-item>

      <el-form-item label="岗位要求">
        <el-input required v-model="detailData.job_requirement" type="textarea" rows="5"
                  placeholder=" 1、计算机相关专业，熟悉Vue框架开发；&#10 2、熟悉至少一门服务端开发语言。" />
      </el-form-item>

      <el-form-item label="岗位描述">
        <el-input required v-model="detailData.job_description" type="textarea" rows="3"
                  placeholder=" 1、参与公司移动端WEB开发；&#10 2、参与公司小程序项目开发。" />
      </el-form-item>

      <el-form-item label="公司名称">
        <el-input required v-model="detailData.company_name" placeholder="XXX科技有限公司" />
      </el-form-item>

      <el-form-item label="公司规模">
        <el-input required v-model="detailData.company_scale" placeholder="20-99人" />
      </el-form-item>

      <el-form-item label="公司位置">
        <el-input required v-model="detailData.company_location" placeholder="福州-鼓楼区" />
      </el-form-item>

      <el-form-item label="公司分类">
        <el-input required v-model="detailData.company_cat" placeholder="互联网" />
      </el-form-item>

      <el-form-item label="企业人资">
        <el-input required v-model="detailData.company_hr" placeholder="李女士-18600000000" />
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button class="fullBtn" type="primary" @click="confirm">提交</el-button>
        <el-button class="fullBtn" type="danger" @click="back">返回</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script setup>
import {watch,inject,ref} from "vue";
import {useRouter} from "vue-router";
const router = useRouter();
const $axios = inject("$axios");
const $root = inject("$root");
let detailData =ref({})

//获取数据详情
const getDetailData = () => {
  const id = router.currentRoute.value.params.id;
  //如果没显示，显示空表
  detailData.value={}
  if (id){
    $axios.get($root+`/recruit/${id}/`).then((res)=>{
      if (res.data.code == 200) {
        console.log(res.data);
        res.data.data.company_position=JSON.stringify(res.data.data.company_position)
        detailData.value = res.data.data
      }})
  }
}
// 提交
const confirm = () => {
  const id = router.currentRoute.value.params.id || null
  if (id){
    update(id)
  }else {
    add()
  }
}
//更新数据
const update = (id) => {
  $axios.post($root+`/recruit/update/${id}/`,detailData.value)
      .then((res)=>{
        if (res.data.code == 200) {
          console.log(res)
          ElMessage({
            message: '更新成功',
            type: 'success',
          })
        }
        else {
          ElMessage.error('更新失败')
        }
      })
}

//添加数据
const add = () => {
$axios.post($root+`/recruit/`,detailData.value)
    .then((res)=>{
      if (res.data.code == 200) {
        ElMessage({
          message: '添加数据成功',
          type: 'success',
        })
      }
      else {
        ElMessage.error('添加数据失败')
      }
    })
}

//返回
const back = () => {
  router.back()
}



watch(() => router.currentRoute.value.name,(name)=>{
  if (name == "jobDetail") {
    getDetailData()
  }
} ,{immediate: true,deep: true})
</script>

<style>
.el-form-item__content {
  display: flex;
  justify-content: center;
}
</style>
